import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Check } from "lucide-react"
import Link from "next/link"

export function AdSidebar() {
  const features = [
    { text: "AI工具导航：精选优质AI工具，涵盖写作、绘画、视频等多个领域", color: "bg-blue-100 text-blue-600" },
    { text: "快速便捷：一键直达，快速找到适合你的AI工具和资源", color: "bg-green-100 text-green-600" },
    { text: "持续更新：定期更新最新AI工具，紧跟技术发展趋势", color: "bg-purple-100 text-purple-600" },
  ]

  return (
    <Card className="sticky top-6 p-6 bg-gradient-to-br from-purple-400 via-purple-500 to-purple-600 border-0 text-white">
      <div className="mb-4">
        <div className="text-sm bg-white/20 rounded px-2 py-1 inline-block">凯笙小世界</div>
      </div>

      <h3 className="text-xl font-semibold mb-2">欢迎来到凯笙小世界</h3>
      <p className="text-sm text-white/90 mb-6">
        一站式全面AIGC网站，提供AI绘图、AI智能对话、AI翻译、AI提示词、AI工具、AI智能写作、3D设计、AI视频、AI语音等专业服务
      </p>

      <div className="space-y-3 mb-6">
        {features.map((feature, index) => (
          <div key={index} className="bg-white rounded-lg p-3 flex items-center gap-2 shadow-sm">
            <div className={`w-2 h-2 rounded-full ${feature.color.split(" ")[0]}`} />
            <span className="text-sm text-gray-800 flex-1">{feature.text}</span>
            <Check className="w-4 h-4 text-gray-400" />
          </div>
        ))}
      </div>

      <Link href="/kason-nav">
        <Button className="w-full bg-white/20 hover:bg-white/30 border-2 border-white text-white font-medium">
          开始探索
        </Button>
      </Link>
    </Card>
  )
}
